<template>
  <div>
    <el-card>
      <div id="main" style="width: 750px; height: 500px"></div
    ></el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {},
  data() {
    return {
      option: {
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 43, 49],
            type: "line",
            stack: "x",
            areaStyle: {},
          },
          {
            data: [5, 4, 3, 5, 10],
            type: "line",
            stack: "x",
            areaStyle: {},
          },
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getReportsData();
  },
  methods: {
    async getReportsData() {
      let { data: res } = await this.$http.get("reports/type/1");
      console.log(res);
      Object.assign(this.option, res.data);
      //lodash插件
      // _.marge(this.option, res.data)
      let main = document.getElementById("main");
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(main);
      // 绘制图表
      myChart.setOption(this.option);
    },
  },
  watch: {},
  components: {},
};
</script>

<style scoped >
</style>
